﻿<!--
Copyright (c) Microsoft Corporation. All rights reserved
-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet" href="/css/common.css">
    <script src="/js/applicationlink.js"></script>
</head>

<body class="win-type-body">
    <div id="scenarioView">
        <div>
            <h2 id="sampleHeader" class="win-type-subheader">Description:</h2>
            <div id="scenarioDescription">Share text</div>
        </div>
        <div id="scenarioContent">
            <p>Data Package Title:</p>
            <input class="text-box" id="titleInputBox" value="Share Source Scenario">
            <p>Data Package Description:</p>
            <input class="text-box" id="descriptionInputBox" value="A deep link to a scenario in this app">
            <p id="applinkLabel">Choose the application link you would like to share</p>
            <p>
                <select id="selectionList" aria-labelledby="applinkLabel" class="win-dropdown">
                    <option selected="selected" value="ms-sdk-sharesourcejs:navigate?page=ShareText" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareText</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareWebLink" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareWebLink</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareApplicationLink" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareApplicationLink</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareImage" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareImage</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareFiles" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareFiles</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareDeplayRenderedFiles" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareDeplayRenderedFiles</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareHTML" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareHTML</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareCustomData" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareCustomData</option>
                    <option value="ms-sdk-sharesourcejs:navigate?page=ShareErrorMessage" class="win-dropdown">ms-sdk-sharesourcejs:navigate?page=ShareErrorMessage</option>
                </select>
            </p>
            <div id="logoArea" style="display: -ms-flexbox; -ms-flex-direction: row;">
                <div id="logoSelection" style="display: -ms-flexbox; -ms-flex-direction: column; padding: 0px 5px;">
                    <div>Logo:</div>
                    <br>
                    <div style="display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center; padding: 0px 5px 0px 5px; ">
                        <input id="defaultLogo" type="radio" name="logo" value="Default" class="win-radio">
                        <span>Default</span>
                        <input id="microsoftLogo" type="radio" name="logo" value="MicrosoftLogo" checked="checked" class="win-radio">
                        <img src="ms-appx:///images/microsoftLogo.png">
                        <input id="visualStudioLogo" type="radio" name="logo" value="VisualStudioLogo" class="win-radio">
                        <img src="ms-appx:///images/visualStudioLogo.png">
                    </div>
                </div>
                <div id="logoBackgroundColor" style="display: -ms-flexbox; -ms-flex-direction: column; padding: 0px 5px;">
                    <div>Logo Background:</div>
                    <br>
                    <div style="display: -ms-flexbox; -ms-flex-direction: row; -ms-flex-align: center;">
                        <div>r</div>
                        <input type="range" id="redSlider" style="padding: 0px 5px;" min="0" max="255" aria-valuemin="0" aria-valuemax="255" value="255" class="win-slider">
                        <div id="redSliderCurrentValue">255</div>
                    </div>
                    <br>
                    <div style="display: -ms-flexbox; -ms-flex-direction:row; -ms-flex-align: center;">
                        <div>g</div>
                        <input type="range" id="greenSlider" style="padding: 0px 5px;" min="0" max="255" aria-valuemin="0" aria-valuemax="255" value="255" class="win-slider">
                        <div id="greenSliderCurrentValue">255</div>
                    </div>
                    <br>
                    <div style="display: -ms-flexbox; -ms-flex-direction:row; -ms-flex-align: center;">
                        <div>b</div>
                        <input type="range" id="blueSlider" style="padding: 0px 5px;" min="0" max="255" aria-valuemin="0" aria-valuemax="255" value="255" class="win-slider">
                        <div id="blueSliderCurrentValue">255</div>
                    </div>
                    <br>
                    <div style="display: -ms-flexbox; -ms-flex-direction:row; -ms-flex-align: center;">
                        <div>a</div>
                        <input type="range" id="alphaSlider" style="padding: 0px 5px;" min="0" max="255" aria-valuemin="0" aria-valuemax="255" value="255" class="win-slider">
                        <div id="alphaSliderCurrentValue">255</div>
                    </div>
                </div>
            </div>
            <p>
                <button id="shareButton" class="win-button">Share</button>
            </p>
        </div>
    </div>
</body>

</html>